<!--
 * @Descripttion: 
 * @version: 
 * @Author: wl
 * @Date: 2020-05-22 16:38:58
 * @LastEditors: wl
 * @LastEditTime: 2020-05-23 14:52:29
--> 


<template>
  <div ref="page" :style="{ height: pageHeight + 'px' }" class="page-container">
    <el-container style="height: 100%">
      <!-- <el-header style="height: 40px" ref="title" v-if="titleShow" class="page-title-container">
        <slot name="title"></slot>
      </el-header> -->
      <el-container style="height: 100%">
        <el-aside ref="aside" v-if="asideShow" class="page-sider-container" style="width:450px">
          <slot name="aside"></slot>
        </el-aside>
        <el-aside ref="accessoryAside" v-if="accessoryAsideShow" class="page-accessorySider-container" style="width:450px">
          <slot name="accessoryAside"></slot>
        </el-aside>
        <el-container class="page-main-container">
          <el-header ref="header" v-if="headerShow" class="page-hearder-container">
            <!--工具栏-->
            <div class="toolbar" :class="[dropDownO ? 'toolbarT' : '']">
              <span class="caret-bottom" @click="changDrop">
                <i v-if="dropDownO" class="el-icon-caret-bottom"></i>
                <i v-else class="el-icon-caret-top"></i>
              </span>
              <div class="toolbarAll">
                <div class="toolbarFrom">
                  <slot name="toolbar"></slot>
                </div>
                <div class="btnSearch"><slot name="btnSearch"></slot></div>
              </div>
            </div>
          </el-header>
          <el-main
            id="main"
            :style="{ 'max-height': contentHeight + 'px' }"
            ref="main"
            class="page-content-container"
          >
            <slot name="content"></slot>
          </el-main>
          <el-footer ref="footer" style="height: 40px" v-if="footShow" class="page-footer-container">
            <slot name="footer"></slot>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  name: "data-template",
  props: {
    titleShow: {
      type: Boolean,
      default: false
    },
    asideShow: {
      type: Boolean,
      default: true
    },
    accessoryAsideShow: {
      type: Boolean,
      default: false
    },
    headerShow: {
      type: Boolean,
      default: true
    },
    footShow: {
      type: Boolean,
      default: true
    },
    dropDown: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    pageHeight() {
      return this.screenHeight - 140;
    }
  },
  data() {
    return {
      dropDownO: this.dropDown,
      screenHeight: document.body.clientHeight,
      contentHeight: 800
    };
  },
  methods: {
    changDrop() {
      // console.log("下拉菜单实现");
      if (this.dropDownO !== true) {
        this.dropDownO = true;
      } else {
        this.dropDownO = false;
      }
    },
    setContentHeight: function () {
      let height = 0;
      if (this.$refs.title) {
        height += this.$refs.title.$el.clientHeight;
      }
      if (this.$refs.header) {
        height += this.$refs.header.$el.clientHeight;
      }
      if (this.$refs.footer) {
        height += this.$refs.footer.$el.clientHeight;
      }
      this.contentHeight = this.pageHeight - height;
    }
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        window.screenHeight = document.body.clientHeight;

        that.screenHeight = window.screenHeight;
      })();
    };

    this.setContentHeight();
  },
  watch: {
    screenHeight(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenHeight = val;

        this.setContentHeight();
        this.timer = true;
        let that = this;
        setTimeout(function () {
          // 打印screenWidth变化的值
          console.log(that.screenHeight);
          that.timer = false;
        }, 400);
      }
    }
  }
};
</script>
<style scoped>
.toolbar {
  width: calc(100% - 10px);
  overflow: hidden;
  position: relative;
  /* padding-right:20px; */
  box-sizing: border-box;
}
.toolbarT {
  height: 43px;
}
.toolbarAll {
  width: calc(100% - 30px);
  display: flex;
  justify-content: space-between;
}
.toolbarFrom {
  /* max-width: calc(100% - 70px); */
}
.btnSearch {
  /* background: brown; */
  margin-top: 5px;
  min-width: 130px !important;
  display: flex;
  justify-content: flex-end;
}
.caret-bottom {
  position: absolute;
  top: 2px;
  right: 5px;
  /* background: crimson; */
}
</style>